<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>论文目录解析工具 - 学术助手</title>
  
  <!-- 外部CSS库 -->
  <script src="css/tailwindcss.js"></script>
  <link href="/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义CSS -->
  <link rel="stylesheet" href="css/style.css">
  
  <!-- 复制按钮红色样式覆盖 -->
  <style>
    #copy-output.copied {
      background: #dc2626 !important;
      background-image: none !important;
      color: #ffffff !important;
    }
  </style>
  
  <!-- Tailwind 配置 -->
  <script src="js/tailwind-config.js"></script>
  
  <!-- 共用导航栏组件 -->
  <script src="js/navbar.js"></script>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col">
  
  <!-- 导航栏将通过 navbar.js 动态加载 -->

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8" style="animation: fadeInUp 0.6s ease-out both;">
      <h2 class="text-4xl font-bold text-dark mb-3">
        论文目录<span class="text-primary">解析工具</span>
      </h2>
      <p class="text-gray-600 text-lg">
        快速去除论文目录页码，一键复制整理后的内容
      </p>
    </div>

    <!-- 使用说明 -->
    <div class="max-w-6xl mx-auto mb-6" style="animation: fadeInUp 0.6s ease-out 0.1s both;">
      <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
        <div class="flex items-start">
          <i class="fa fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
          <div>
            <h3 class="font-semibold text-blue-900 mb-1">使用说明</h3>
            <p class="text-blue-800 text-sm">
              1. 在左侧输入框粘贴带页码的论文目录
              2. 工具会自动识别并去除页码（支持罗马数字、阿拉伯数字等格式）
              3. 右侧显示处理后的纯净目录
              4. 点击"一键复制"按钮即可复制整理后的内容
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主工作区 -->
    <div class="max-w-6xl mx-auto" style="animation: fadeInUp 0.6s ease-out 0.2s both;">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- 左侧：输入区 -->
        <div class="bg-white rounded-2xl shadow-soft p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-800 flex items-center">
              <i class="fa fa-pencil-square-o text-blue-600 mr-2"></i>
              原始目录输入
            </h3>
            <button 
              id="clear-input" 
              class="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all"
            >
              <i class="fa fa-trash-o mr-1"></i>清空
            </button>
          </div>
          
          <textarea 
            id="input-catalog" 
            class="w-full h-[500px] p-4 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none resize-none font-mono text-sm leading-relaxed"
            placeholder="在此粘贴带页码的论文目录...&#10;&#10;例如：&#10;摘  要	I&#10;Abstract	II&#10;1 引言	1&#10;2 轮胎的基本结构与主要性能指标	1&#10;2.1 轮胎的基本结构组成	1&#10;2.2 轮胎的主要性能参数	2&#10;..."
          ></textarea>
          
          <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
            <span>字符数: <span id="input-count" class="font-semibold text-gray-700">0</span></span>
            <span>行数: <span id="input-lines" class="font-semibold text-gray-700">0</span></span>
          </div>
        </div>

        <!-- 右侧：输出区 -->
        <div class="bg-white rounded-2xl shadow-soft p-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-800 flex items-center">
              <i class="fa fa-check-circle text-green-600 mr-2"></i>
              解析后目录
            </h3>
            <div class="flex space-x-2">
              <button 
                id="copy-output" 
                class="px-4 py-2 text-sm bg-gradient-to-r from-green-500 to-emerald-600 hover:shadow-lg text-white rounded-lg transition-all font-medium"
              >
                <i class="fa fa-copy mr-1"></i>一键复制
              </button>
              <button 
                id="download-output" 
                class="px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-indigo-600 hover:shadow-lg text-white rounded-lg transition-all font-medium"
              >
                <i class="fa fa-download mr-1"></i>下载
              </button>
            </div>
          </div>
          
          <div 
            id="output-catalog" 
            class="w-full h-[500px] p-4 bg-gray-50 border-2 border-gray-200 rounded-xl overflow-y-auto font-mono text-sm leading-relaxed whitespace-pre-wrap"
          >
            <div class="text-gray-400 text-center py-20">
              <i class="fa fa-arrow-left text-4xl mb-3"></i>
              <p>在左侧输入目录后</p>
              <p>这里会自动显示解析结果</p>
            </div>
          </div>
          
          <div class="mt-4 flex items-center justify-between text-sm">
            <span class="text-gray-500">行数: <span id="output-lines" class="font-semibold text-gray-700">0</span></span>
          </div>
        </div>

      </div>
    </div>

    <!-- 功能特性 -->
    <div class="max-w-6xl mx-auto mt-12 grid grid-cols-1 md:grid-cols-3 gap-6" style="animation: fadeInUp 0.6s ease-out 0.3s both;">
      <div class="bg-white rounded-xl p-6 shadow-soft text-center">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-bolt text-blue-600 text-2xl"></i>
        </div>
        <h4 class="font-bold text-gray-800 mb-2">智能识别</h4>
        <p class="text-gray-600 text-sm">自动识别各种页码格式，包括罗马数字、阿拉伯数字、字母等</p>
      </div>
      
      <div class="bg-white rounded-xl p-6 shadow-soft text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-magic text-green-600 text-2xl"></i>
        </div>
        <h4 class="font-bold text-gray-800 mb-2">实时处理</h4>
        <p class="text-gray-600 text-sm">边输入边处理，即时查看效果，提高工作效率</p>
      </div>
      
      <div class="bg-white rounded-xl p-6 shadow-soft text-center">
        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa fa-shield text-purple-600 text-2xl"></i>
        </div>
        <h4 class="font-bold text-gray-800 mb-2">隐私安全</h4>
        <p class="text-gray-600 text-sm">纯前端处理，数据不上传服务器，保护论文内容隐私</p>
      </div>
    </div>

  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-8 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-600">
      <p class="mb-2">© 2024 学术助手 - 专注于学术资源与工具导航</p>
      <p class="text-sm">
        <a href="index.html" class="hover:text-primary transition-colors">返回首页</a>
        <span class="mx-2">|</span>
        <a href="tools.html" class="hover:text-primary transition-colors">论文工具</a>
        <span class="mx-2">|</span>
        <a href="#" class="hover:text-primary transition-colors">意见反馈</a>
      </p>
    </div>
  </footer>

  <!-- JavaScript -->
  <script src="js/catalog-parser.js"></script>
</body>
</html>

